﻿@inherits System.Web.Mvc.WebViewPage

@{
    View.Title = "Home Page";
    LayoutPage = "~/Views/Shared/_Layout.cshtml";
}

<script src="@Url.Content("~/Scripts/eriklieben.cssoptimizer.js")?css=~/Content/template.css" type="text/javascript"></script>

<h2>ErikLieben Css Optimizer (First version, not for production usage)</h2>
<p>Not all the functionality is working correctly at the moment, working on getting it to work correctly.</p>
<p>But in the mean time, just created a release so you are able to see what you can do with it</p>

<h2>Current functionality</h2>
<ul>
	<li><strong>Single and multi variable support (Fully working) </strong><br><i>This allows you to define and use easy to modify variables.<br>Example: Define a common page.highlight color that is used for each item you want to highlight</i></li>
	<li><strong>Css Variables are accessible from javascript client side code (Partially working)</strong><br><i>Auto generates javascript properties that allow you to modify the items where the variable is used (see buttons below)<br>Example: Allow the user to specify a theme on the client side with javascript</i></li>
	<li><strong>Reuse and extend css class definitions with others and allow parameters(mixins) (Partially working)</strong><br><i>Allow you to use -extend: classname, see example below with csscode, jscode, htmlcode, textcode</i></li>
	<li><strong>Simple inner or outher if conditions (Not implemented yet)</strong><br><i>Allows you to use if statements.<br>Example: generate borders arround each css class if the variable @@debug is set to 1.</i></li>
	<li><strong>Math functions on color or pixel based values (Not implemented yet, just prototype/tested)</strong><br><i>Allow you to perform math on for example the color of a header, see below.<br>Still need to figure out how to make colorwheel pi stuff easier for the user</i></li>
	<li><strong>Browser hacks cleanup (Not implemented yet)</strong><br><i>Will cleanup IE * and _ hack, -webkit etc. if your browser is different than where the hack is for, so it cannot be used accidently by another browser</i></li>
	<li><strong>Css cleanup/optimize (Partially working, needs improvement)</strong><br><i>Will cleanup and optimize your css code, remove unneeded characters, etc.</i></li>
	<li><strong>TODO: Client/Server side caching, it's too slow now..</strong></li>
	<li><strong>TODO: allow dynamic rendering and/or static</strong><br><i>allow you to define in the web.config if you would only like to process once (and save processor resource) or on each request</i></li>
	<li><strong>TODO: Create GUI to generate css/javascript and the html tags to use this without ASP.NET</strong><br><i>generate files only, instead of using it as http handler</i></li>
</ul>

<p>Below is the code before processing the css</p>
<pre class="csscode formatted">
@@variable color {
  header: #ff6600;
  page: #efefef;
}

@@variable debug {
    1
}

h1 {
    color: color.header;
}
h2 {
    color: color.header + #000033;
}
h3 {
    color: color.header + #003300;
}
h4 {
    color: color.header + #003333;
}
h5 {
    color: color.header + #009900;
}
h6 {
    color: color.header + #009966;
}

.body, .main {
    background-color: color.page;
}

.csscode, .jscode, .htmlcode, .textcode {
    padding:10px;
    background-color:White;
    border: 1px solid gray;
    overflow:hidden;
    word-wrap: break-word;
    width:650px;
    -extend: rounded_corners;
}

.rounded_corners (radius: 5px) {
  -moz-border-radius: radius;
  -webkit-border-radius: radius;
  border-radius: radius;
}
</pre>

<h1>Header 1</h1>
<h2>Header 2</h2>
<h3>Header 3</h3>
<h4>Header 4</h4>
<h5>Header 5</h5>
<h6>Header 6</h6>

<h3>The debug code from the css javascript variable property generator</h3>
<pre class="textcode">
<script>
document.write(debug);
</script>
</pre>
<p>This works only in browsers that support the new ECMAScript 5 gettter setter (IE9 / Chrome 6, etc.), still need to fix this for older browsers.<br>
If you run an older browser that doesn't support the new getter/setters, than you will get a javascript error for now.</p>
<p>You can only load the variables css file by css file for now (it doesn't combine variables in different css files) by including the following html:</p>
<pre class="textcode">
 < script src="/Scripts/eriklieben.cssoptimizer.js?css=~/Content/template.css" type="text/javascript">< /script>
</pre>
<p>This will not be changed to some auto generate js code, because it takes extra processing power.<br>
You should just use this on pages where you use the jscode, a master page or template page would probaly be bad practice.</p>
<p>Click one of the buttons to set the property/variable with javascript code</p>
<input type="button" value="onclick=document.css.color.page=#FFFFD4" onclick="document.css.color.page='#FFFFD4'" style="height:25px;width:450px" /><br />
<input type="button" value="onclick=document.css.color.page=#EFEFEF" onclick="document.css.color.page='#EFEFEF'" style="height:25px;width:450px" /><br />
<input type="button" value="onclick=document.css.color.page=#AAFFAA" onclick="document.css.color.page='#AAFFAA'" style="height:25px;width:450px" /><br />
<p>See <a href="http://csspreprocessor.codeplex.com/">http://csspreprocessor.codeplex.com/</a> for code</p>